<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <div>
          <el-button size="mini" type="success" @click="doc()">
            文档
          </el-button>
          <el-button size="mini" type="success" @click="getStats()">
            状态
          </el-button>
          <el-button size="mini" type="success" @click="execRun()">
            Run
          </el-button>
          <el-button size="mini" type="success" @click="execFunc()">
            功能
          </el-button>
          <el-button size="mini" type="success" @click="getJobs()">
            任务
          </el-button>
      <el-form>
        <el-form-item label="功能">
          <el-input v-model="form.input" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
        </el-form-item>
      <el-form-item label="显示结果">
        <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 12, maxRows: 20}"/>
      </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getDoc,getStats,execRun,execFunc,getJobs} from '@/api/salt'

import Vue from 'vue'
import Saltdoc from '@/utils/saltdoc'
Vue.use(Saltdoc)



export default {
  name: 'Dashboard',
  data(){
    return {
      form: {
        desc: null,
        input: null
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    getJobs(){
      getJobs().then(response =>{
        var resp = response.data
        // console.log(Vue.prototype.SaltDoc)
        this.form.desc = JSON.stringify(resp)
      })
    },
    doc(){
      getDoc().then(response => {
        var resp = response.data
        this.form.desc = JSON.stringify(resp)
      })
    },
    execFunc(){
      execFunc(this.form).then(response =>{
        var resp = response.data
        this.form.desc = JSON.stringify(resp)
      })
    },
    getStats(){
      getStats().then(response => {
        var resp = response.data
        this.form.desc = JSON.stringify(resp)
      })
    },
    execRun(){
      execRun().then(response => {
        var resp = response.data
        console.log(resp)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
